import { createElement, HTMLAttributes, ImgHTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { revealContentDefaultProps } from './defaultProps';
import type { RevealContentOptions } from './type';

export interface RevealContentProps
  extends RevealContentOptions,
    HTMLAttributes<HTMLElement>,
    ImgHTMLAttributes<HTMLElement> {}

const RevealContent: FC<RevealContentProps> = (props) => {
  const { className, hidden, visible, image, children, forwardedRef, ...revealContentProps } = props;

  return createElement(
    image ? 'img' : 'div',
    { ref: forwardedRef, className: classNames('content', { hidden, visible }, className), ...revealContentProps },
    children,
  );
};

RevealContent.displayName = 'RevealContent';
RevealContent.defaultProps = revealContentDefaultProps;

export default RevealContent;
